<template>
    <!-- nav开始   start --> 
    <div class="nav clearfix">
        <div class="w">
            <!-- 移出nav_left的nav_left隐藏  -->
            <div class="nav_left" 
                @mouseleave="re_Color"
            >
            <!-- 移入h2时  显示bootom（） -->
                <h2 @mouseenter="fleg=true">全部商品分类</h2>
                <!-- 使用事件委派   在a标签的父级添加点击事件Get_category（冒泡）
                     需要获取event必须要使用$event获取event
                 -->

                 <transition name="transition">
                     <div class="bottom" 
                        @click="Get_category($event)" 
                        v-show="fleg">
                        <ul>
                            <!-- 移入时把li的索引传给Set_BgColo -->
                            <!-- :class：BgColor设置完成的样式  ： 为true则显示样式 | false 则不显示样式
                                    把设置的索引  是否 等于li索引  如果等于则显示样式
                                -->
                            <li v-for="(category1,index) in Get_List"
                            :key="category1.categoryId" 
                            @mouseenter="Set_BgColo(index)"
                            :class="{BgColor:index == init_fleg }" >
                            <!-- 给a标签添加自定义属性: 【自定义属性必须为  data-  开头】
                                :data-categoryName(: 为vue用)
                                :data-categoryId1
                                prevent取消默认事件 
                            -->
                                <a href.prevent="" 
                                    :data-categoryName='category1.categoryName' 
                                    :data-categoryId1='category1.categoryId'
                                >{{category1.categoryName}}</a>
                                <i class="iconfont icon-xiangyoujiantou"></i>
                                <div class="nav_right_div" v-show="init_fleg == index">
                                    <div class="nav_right_todiv">
                                        <dl class="fore" v-for="category2 in category1.categoryChild" :key="category2.categoryId">
                                            <dt>
                                                <!-- 给a标签添加自定义属性: 【自定义属性必须为  data-  开头】
                                                    :data-categoryName(: 为vue用)
                                                    :data-categoryId2
                                                    prevent取消默认事件 
                                                -->

                                                <a href.prevent="" 
                                                    :data-categoryName='category2.categoryName' 
                                                    :data-categoryId2='category2.categoryId'
                                                >{{category2.categoryName}}</a>
                                            </dt>
                                            <dd>
                                                <em v-for="category3 in category2.categoryChild" :key="category3.categoryId">
                                                    <!-- 给a标签添加自定义属性: 【自定义属性必须为  data-  开头】
                                                        :data-categoryName(: 为vue用)
                                                        :data-categoryId3
                                                        prevent取消默认事件 
                                                    -->
                                                    <a href.prevent="" 
                                                        :data-categoryName='category3.categoryName' 
                                                        :data-categoryId3='category3.categoryId'
                                                    >{{category3.categoryName}}</a>
                                                </em>
                                            </dd>
                                        </dl>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                 </transition>
                
            </div>
            <div class="nav_right">
                <ul>
                    <li>
                        <a href="">服装城</a>
                    </li>
                    <li>
                        <a href="">美妆馆</a>
                    </li>
                    <li>
                        <a href="">京东超市</a>
                    </li>
                    <li>
                        <a href="">全球购</a>
                    </li>
                    <li>
                        <a href="">闪购</a>
                    </li>
                    <li>
                        <a href="">团购</a>
                    </li>
                    <li>
                        <a href="">拍卖</a>
                    </li>
                    <li>
                        <a href="">有趣</a>
                    </li>
                    <li>
                        <a href="">秒杀</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- nav结束     end -->
</template>

<script>
import {mapState} from 'vuex'

import 'animate.css'
// 引入lodash插件中的节流函数
import {throttle} from 'lodash'

export default {
    name:'Nav',
    data() {
      return {

        //把索引设置为不等于  li的索引  因为索引为-1不等于li索引 所有任何没有样式
        init_fleg:-1,

        //表示Nav是否显示 在不同组件
        fleg:true,
      };
    },
    mounted() {

      //如果路由的name为search 则隐藏Nav
      if(this.$route.name == 'search'){
         this.fleg = false;
      }
      if(this.$route.name=='detail'){
          this.fleg = false;
      }
      if(this.$route.name=='cart'){
          this.fleg = false;
      }

    },
    methods: {
        // 使用throttle(节流) 必须为完整函数形式
            // 函数名: 函数（） 
        // 移入li的改变背景颜色方法 (Set_BgColo方法) 
        Set_BgColo:throttle(function(index){
             //   把索引值赋值给li的索引      
            this.init_fleg = index;
        },80),

        // 移出li背景颜色为无样式   
            // 如果init_fleg = -1 则init_fleg 不等于 li的index（这样则为false  不显示样式）
        re_Color(){
            this.init_fleg = -1;
            // 如果route的name为 serach 则隐藏Nav
            if(this.$route.name == 'search'){
                this.fleg = false;
            }
            if(this.$route.name == 'detail'){
                this.fleg = false;
            }
            if(this.$route.name=='cart'){
                this.fleg = false;
            }
        },

        //点击三级栏中a标签 跳转到 Search并且携带参数
        Get_category(event){

            let element = event.target;//获取当前点击的标签

            //html中会把大写转为小写
            //获取目前鼠标点击标签的categoryname,category1id,category2id,category3id，
            // 通过四个属性是否存在来判断是否为a标签，以及属于哪一个等级的a标签
            let {categoryname,categoryid1,categoryid2,categoryid3} = element.dataset;

            // 定义一个跳转Serch页面数据
            let Go_Serach = {
                name:"search",//跳转路由name
                query:{
                    categoryName:categoryname//路由参数
                }
            }

            // 判断客户是不是点击了搜索框  如果没有点击则跳过  点击了则负责给定义的数据
            if(this.$route.params){
                Go_Serach.params = this.$route.params;
            }

            //categoryname存在，表示为a标签
            if(categoryname){
                if(categoryid1){
                    Go_Serach.query.category1Id = categoryid1
                }else if(categoryid2){
                    //category2id二级a标签
                     Go_Serach.query.category2Id = categoryid2
                }else if(categoryid3){
                    //category3id三级a标签
                     Go_Serach.query.category3Id = categoryid3
                }
                // 如果写到外面则会出现不是 a标签 的情况
                this.$router.push(Go_Serach);  
            }
        }
    },
    computed:{
      ...mapState('home',['Get_List']),
    }
}
</script>

<style scoped lang='less'>

//nav开始   start
    .BgColor{
        background: #007aff;
        padding-left: 20px;
        }
    
.nav{
    height: 45px;
    width: 100%;
    border-bottom: 2px solid #e1251b;
    .w{
        display: flex;
    }
    .nav_left{
        position: relative;
        left: 0px;
        width: 210px;
        h2{
            height: 45px;
            background-color: #e1251b;
            line-height: 45px;
            text-align: center;
            color: #fff;
            font-size: 14px;
            font-weight: bold;
        }
        .bottom{
            position: absolute;
            width: 100%;
            background-color: #c81623;
            z-index: 999;
            ul{
                
                display: flex;
                flex-direction: column;
                // justify-content: space-between;
                height: 461px;
                position: relative;
                li{
                    flex: 1;
                    // height: (461/18px);
                    // line-height: (461/18px);
                    transition: all .5s;
                    margin-left: 1px;
                    // &:hover{
                    //     background: #fff;
                    //     padding-left: 20px;
                    // }
                    // &:hover a{
                    //     color: #c81623;
                    // }
                    a{
                        margin-left: 10px;
                        font-size: 14px;
                        color: #fff;
                        cursor: pointer;
                     }
                    i{
                        float: right;
                        color: #fff;
                    }
                    .nav_right_div{
                        position: absolute;
                        border: 1px solid #ddd;
                        background: #f7f7f7;
                        width: 735px;
                        box-sizing: border-box;
                        height: 100%;
                        // top: -2px;
                        top:0;
                        left: 210px;
                        z-index: 9999;
                        a{
                            font-size: 12px;
                        }
                        .nav_right_todiv{    
                            width: 700px;
                            padding: 5px 4px 0 2px;
                            margin: 0 auto;
                            line-height: 30px;
                            .fore{
                                margin: 5px  0px;
                                line-height: 22px;
                                overflow: hidden;
                               dt{   
                                   float: left;
                                    width: 80px;
                                    line-height: 22px;
                                    text-align: right;
                                    padding: 0px 8px 0 0;
                                    font-weight: 700;
                                    margin:3px 0px;
                                    &>a{
                                        margin: 0px;
                                        display: block;
                                        color: #666;
                                    }
                               }
                                dd{
                                    display: flex;
                                    flex-wrap: wrap;
                                    em{
                                        line-height: 22px;
                                        padding: 0 8px;
                                        margin:3px 0px;
                                        border-left: 1px solid #ccc;
                                        a{
                                            display: block;
                                            color: #666;
                                            margin: 0;
                                        }
                                    }
                                    .nav_em{
                                        height: 12px;
                                        width: 1px;
                                        background:#ccc ;
                                        margin: 6px 10px 0px 10px;
                                    }
                                }
                                a{
                                    color: #000;
                                }
                            }
                        }
                    }
                }
                &>li:hover .nav_right_div{
                    display: block;
                }
            }
        }
         .transition-enter{
             opacity: 0;
        }
        .transition-enter-to{
            opacity: 1;
        }
        .transition-enter-active{
            transition: all 0.9s;
        }
    }
    .nav_right{
        ul{
            display: flex;
            height: 45px;
            line-height: 45px;
            font-size: 16px;
            color: #333;
            li{
                margin: 0 22px;
            }
        }
    }
}
//nav结束   end 
   
</style>